<script setup>
import { getCategoryAPI } from '@/apis/category'
import { onMounted } from 'vue'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { getBannerAPI } from '@/apis/home'
const route=useRoute()
const categoryData = ref({})
let i=ref(0)
const getCategory=async()=>{
  const res=await getCategoryAPI(route.params.id)
  categoryData.value=res.result
  console.log(categoryData.value);
}
const banner = ref([])
const getBanner=async ()=>{ 
  const res=await getBannerAPI()
  banner.value=res.result
}
onMounted(()=>{
  getCategory()
  getBanner()
})
setInterval(()=>{
  if(i.value<banner.value.length-1){
    i.value++
  }else{
    i.value=0
  }
 },1000)
</script>
<template>
<div style="width: 100%; text-align: left; clear: both;">
  <el-breadcrumb separator=">">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
  </el-breadcrumb>

  <div class="category-banner">
    <img :src="banner[i]?.imgUrl" alt="">
  </div>

  <div class="total">
    
    <h3 style="text-align: center;">全部分类</h3>
    <div class="h">
      <div v-for="item in categoryData.children" :key="item.id" class="li">
    <router-link :to="{ path: '/category/sub/' + item.id }">
      <img :src="item.picture" alt="">
      <p>{{ item.name }}</p>
    </router-link>
    </div>
    </div>

  </div>
  <div class="total" v-for="item in categoryData.children" :key="item.id">
    <h3 style="text-align: center;">{{ item.name }}</h3>
    <div class="h">
      <div v-for="i in item.goods" :key="i.id" class="li">
      <img :src="i.picture" alt="">
      <p>{{ i.name }}</p>
    </div>
    </div>

  </div>


</div>
</template>

<style scoped>
.category-banner {
  height: 500px;
  width: 100%;

margin-left: 15%;
}
.total { 
height: 200px;
width: 1000px;
background-color: antiquewhite;
}
.h {
  display: flex;
  justify-content: space-between;
}
.li {
  height: 140px;
  width: 140px;
  background-color: aqua;


}



</style>
